<html>
  <header>
    <title>test</title>
    <style>
      body {
        --bg: #ea3549;

        padding: 50px;
      }

      .component {
        position: relative;
        width: 100;
        height: 100;
        background-color: skyblue;
        overflow: visible;
      }

      .ribbon-container {
        position: absolute;
        top: -6px;
        left: -3px;
      }

      .ribbon {
        position: relative;
        width: 60px;
        border-radius: 4px 4px 4px 0px;
        color: #fff;
        padding: 2px 6px;
        font-size: 10px;
        line-height: 16px;
        background: linear-gradient(
            to right bottom,
            rgba(255, 255, 255, 0.4),
            transparent
          )
          var(--bg, #ea3447);
        background-blend-mode: soft-light;
      }

      .ribbon::before {
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        left: 0;
        bottom: -3px;
        background-color: inherit;
        filter: brightness(0.7);
        clip-path: polygon(0 0, 100% 0, 100% 100%);
      }

      .content {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </header>
  <body class="body">
    <div class="component">
      <div class="content">
        <div>内容区域</div>
      </div>

      <div class="ribbon-container">
        <div class="ribbon">审核为通过</div>
      </div>
    </div>
  </body>
</html>
